<template>
  <div>
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <div class="overview-content">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
          <div class="chart-wrapper">
            <el-table
              show-overflow-tooltip
              :height="tableHeight"
              :data="list"
              style="width: 100%"
              class="card-table"
              :border="false"
              stripe
              :default-sort="{ prop: 'five' }"
            >
              <el-table-column
                show-overflow-tooltip
                label="序号"
                type="index"
                width="50"
                align="center"
              />

              <el-table-column
                show-overflow-tooltip
                label="地址 "
                prop="address"
                min-width="200"
                align="center"
              >
                <template slot-scope="scope">
                  <router-link
                    :to="{ path: 'pageDetail', query: { id: scope.row.id } }"
                    class="linkBtn"
                  >
                    {{ scope.row.address }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="type"
                :formatter="houseTypeFormat"
                label="类型"
                min-width="100"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                label="户型"
                min-width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.roomNumber"
                    >{{ scope.row.roomNumber }}房</span
                  >
                  <span v-if="scope.row.wcNumber"
                    >{{ scope.row.wcNumber }}卫</span
                  >
                  <span v-if="scope.row.carRoomNumber"
                    >{{ scope.row.carRoomNumber }}车库</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="ownerName"
                label="业主"
                min-width="100"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="bdName"
                label="BD"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="operatorName"
                label="运营"
                align="center"
                min-width="100"
              />
              <el-table-column
                show-overflow-tooltip
                prop="createdTime"
                label="添加时间"
                :formatter="dateFormatRow"
                sortable
                width="100"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="tag"
                label="标签"
                width="150"
                :formatter="houseTagFormat"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                label="状态"
                prop="status"
                :formatter="houseStatusFormat"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                label="操作"
                align="center"
                width="150"
                v-if="false"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    :disabled="scope.row.status == 0 || scope.row.status > 2"
                    size="small"
                    class="linkBtn"
                    @click="handleClick(scope.row, 1)"
                    >交接</el-button
                  >
                  <el-button
                    type="text"
                    :disabled="
                      (scope.row.status <= 2 && scope.row.canSale == 'Y') ||
                      scope.row.status == 4
                    "
                    size="small"
                    @click="handleClick(scope.row, 2)"
                    >出租</el-button
                  >
                  <el-button
                    type="text"
                    :disabled="
                      (scope.row.status <= 2 && scope.row.canSale == 'Y') ||
                      scope.row.status == 4
                    "
                    size="small"
                    @click="handleClick(scope.row, 3)"
                    >出售</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page="listQuery.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <!--          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

            <!---->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import { page } from "@/api/house";
import { leaseAdd } from "@/api/lease";
import { saleAdd } from "@/api/sale";
import Breadcrumb from "@/components/Breadcrumb";
import {
  getWaitDeliveryHouseDet,
  getWaitReciveKeyHouseDet,
  getCheckOutHouseDet,
} from "@/api/dashboard";
import {
  addUndeliveredHandoverByHouseId,
  addRentHandoverByHouseId,
  addIdleHandoverByHouseId,
} from "@/api/handover";
import {
  replaceParamEmptyString,
  houseTypeFormat,
  houseStatusFormat,
  dateFormatRow,
  houseTagFormat,
} from "@/utils/common";

export default {
  components: { myModal, Breadcrumb },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    myData: {
      type: Object,
    },
  },
  data() {
    return {
      currentPage: 1,
      list: null,
      total: 0,
      listLoading: true,
      tableHeight: 0,
      listQuery: {
        page: 1,
        limit: 10,
        type: null,
        orderStatus: null,
        payType: null,
        buyer: null,
        goodsId: null,
        organizationId: null,
      },
      objMo: {
        show: false,
        title: "选择房产来源",
        width: "536px",
      },
      sizeForm: {},
      radio: 1,
      houseTypeFormat,
      houseStatusFormat,
      houseTagFormat,
      dateFormatRow,
      houseId: "",
      api: null,
    };
  },
  watch: {
    myData(response, bV) {
      this.list = response.data.records;
      this.total = response.data.total;
      this.listLoading = false;
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
      // 后面100一般是根据你上下导航栏的高度来减掉即可。
    });
    const apis = [
      getWaitDeliveryHouseDet,
      getWaitReciveKeyHouseDet,
      getCheckOutHouseDet,
    ];
    const { type } = this.$route.query;
    this.api = apis[type - 1];
    this.getList();
  },
  methods: {
    getList() {
      console.log(this.api);
      if (!this.api) return;
      this.listLoading = true;
      this.listQuery = replaceParamEmptyString(this.listQuery, [
        "type",
        "orderStatus",
        "payType",
        "goodsId",
      ]);
      this.api(this.listQuery).then((response) => {
        console.log(response);
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    addUndeliveredHandover(id) {
      addUndeliveredHandoverByHouseId(id).then((response) => {
        console.log(response);
        const houseId = id;
        const processId = response.data.id;
        const step = response.data.step;
        const address = response.data.address;
        this.$router.push({
          path: "pageProcess",
          query: { houseId, processId, step, address },
        });
      });
    },
    addRentHandover(id) {
      addRentHandoverByHouseId(id).then((response) => {
        console.log(response);
        const houseId = id;
        const processId = response.data.id;
        const step = response.data.step;
        const address = response.data.address;
        this.$router.push({
          path: "regroup",
          query: { houseId, processId, step, address },
        });
      });
    },
    addIdleHandover(id) {
      addIdleHandoverByHouseId(id).then((response) => {
        console.log(response);
        const houseId = id;
        const processId = response.data.id;
        const step = response.data.step;
        const address = response.data.address;
        this.$router.push({
          path: "IdleHousing",
          query: { houseId, processId, step, address },
        });
      });
    },
    async handleClick(par, val) {
      if (val === 1) {
        this.houseId = par.id;
        if (par.houseSource === 0) {
          this.addUndeliveredHandover(this.houseId);
          return;
        } else if (par.houseSource === 1) {
          this.addRentHandover(this.houseId);
          return;
        } else if (par.houseSource === 2) {
          this.addIdleHandover(this.houseId);
          return;
        }
        this.objMo.show = true;
      } else if (val === 2) {
        var detailRes = await leaseAdd(par.id);
        const routerURl = this.$router.resolve({
          path: "leasepageProcess",
          query: { id: detailRes.data.id },
        });
        window.open(routerURl.href, "_blank");
        // this.$router.push({ path: 'leasepageProcess', query: { id: detailRes.data.id }})
      } else if (val === 3) {
        var saleDetailRes = await saleAdd(par.id);
        const routerURl = this.$router.resolve({
          path: "salesProcess",
          query: { id: saleDetailRes.data.id },
        });
        window.open(routerURl.href, "_blank");
        // this.$router.push({ path: 'salesProcess', query: { id: saleDetailRes.data.id }})
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.page = val;
      this.getList();
    },
    close() {
      this.objMo.show = false;
    },
    save() {
      this.objMo.show = false;
      if (this.radio === 1) {
        this.addUndeliveredHandover(this.houseId);
      } else if (this.radio === 2) {
        this.addRentHandover(this.houseId);
      } else if (this.radio === 3) {
        this.addIdleHandover(this.houseId);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}

.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5ac6b7;
    transform: translateY(-50%);
  }
}
</style>
